// pages/detail-search/detail-search.js
import {getSearchSuggest, searchHot, getSearchResult} from '../../service/api'
import debounce from "../../utils/debounce";
import {audioStore} from '../../store/audioctx'
const debounceGetSearchSuggest = debounce(getSearchSuggest, 100)
Page({

  /**
   * 页面的初始数据
   */
  data: {
    searchValue: '',
    hotKeyWords: [],
    suggestNode: [],
    searchSuggest: [],
    resultList: [],
    historyList: []
  },
  searchValueChange(event) {
    // console.log(event)
    const searchValue = event.detail
    this.setData({searchValue})
    if (!searchValue.length) {
      this.setData({searchSuggest: []})
      this.setData({resultList: []})
      this.setData({suggestNode: []})
      return
    }
    debounceGetSearchSuggest(searchValue).then(e => {
      const {result: {allMatch}} = e
      if (allMatch) {
        this.setData({searchSuggest: allMatch})
        this.string2Node(allMatch)
      } else {
        this.setData({searchSuggest: []})
      }
    })
  },
  string2Node(arr) {
    const suggestNode = []
    for (const item of arr) {
      if (item.keyword.toUpperCase().startsWith(this.data.searchValue.toUpperCase())) {
        let str1 = item.keyword.slice(0, this.data.searchValue.length)
        let node1 = {
          name: 'span',
          attrs: {
            style: "color: red"
          },
          children: [{
            type: 'text',
            text: str1
          }]
        }
        let str2 = item.keyword.slice(this.data.searchValue.length)
        let node2 = {
          name: 'span',
          attrs: {
            style: "color: block"
          },
          children: [{
            type: 'text',
            text: str2
          }]
        }
        suggestNode.push([node1, node2])
      } else {
        let node1 = {
          name: 'span',
          attrs: {
            style: "color: block"
          },
          children: [{
            type: 'text',
            text: item.keyword
          }]
        }
        suggestNode.push([node1])
      }
    }
    this.setData({suggestNode})
  },
  keyWordSearchInfo(e) {
    const keyword = this.data.hotKeyWords[e.currentTarget.dataset.index].first
    this.setData({searchValue: keyword})
    this.getSearchResult(keyword)
  },
  suggestSearchInfo(e) {
    const keyword = this.data.searchSuggest[e.currentTarget.dataset.index].keyword
    this.setData({searchValue: keyword})
    this.getSearchResult(keyword)
  },
  historySearchInfo(e) {
    const keyword = this.data.historyList[e.currentTarget.dataset.index]
    this.setData({searchValue: keyword})
    this.getSearchResult(keyword)
  },
  searchInfo() {
    this.getSearchResult(this.data.searchValue)
  },
  getSearchResult(val) {
    if (!this.data.historyList.find(e => e==val)) {
       if (this.data.historyList.length < 10) {
        this.setData({historyList: [val,...this.data.historyList]})
       } else {
        this.setData({historyList: [val,...this.data.historyList.slice(0,9)]})
       }
      wx.setStorageSync('historyList', this.data.historyList)
    }
    getSearchResult(val).then(e => {
      const {result: {songs}} = e
      this.setData({resultList: songs})
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    const res = await searchHot()
    const {result: {hots}} = res
    this.setData({hotKeyWords: hots})
    let historyList = wx.getStorageSync('historyList')
    if (historyList) {
      this.setData({historyList})
    }
  },
  musicItemTap(e) {
    audioStore.setState('songsPlayList', this.data.resultList)
    audioStore.setState('currentPlayIndex', e.currentTarget.dataset.index)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  }
})